$(function(){
	var con = document.getElementById('cont');
	con.style.height = document.documentElement.clientHeight + 'px';

	// 横向每张图片宽度
	var liWidth = document.documentElement.clientWidth / 5 + 'px';
	$('.th-img').css('width', liWidth);
	$('.th-img').css('height', liWidth);

	// 横向ul宽度
	var ulWidth = 0;
	var number = 0;
	$('.th-img').each(function(){
		ulWidth += parseInt($(this).width());
		number ++;
	});
	var differ = parseInt(number * 5);
	$('.img-list').css('width', ulWidth + differ + 'px');

	// 图片集合每张图片宽度
	var liWidth = document.documentElement.clientWidth / 3.5 + 'px';
	$('.th-gather').css('width', liWidth);
	$('.th-gather').css('height', liWidth);

	// 图片绑定拍照
	$('#file-btn').click(function(){
		$('#file').click();
	});

	// 菜单
	$('#menu-button').click(function(event){
		$('.child-menu').fadeToggle();
		event.stopPropagation();
	});

	$(document).click(function(){
		$('.child-menu').fadeOut();
	});

	// 图片拖动、缩放
	var $targetObj = $('#float-img');
    // 初始化设置
	cat.touchjs.init($targetObj, function (left, top, scale, rotate) {
	    $targetObj.css({
	        left: left,
	        top: top,
	        'transform': 'scale(' + scale + ')',
	        '-webkit-transform': 'scale(' + scale + ')'
	    });
	});
	// 初始化拖动手势（不需要就注释掉）
	cat.touchjs.drag($targetObj, function(){});
	// 初始化缩放手势（不需要就注释掉）
	cat.touchjs.scale($targetObj, function(){});

	// 水平图片拖动
	var swiper = new Swiper('.swiper-container', {
        slidesPerView: 5,
        centeredSlides: false,
        slidesPerView: 'auto',
        observer: true,
        observeParents: true
    });

	// 单击替换作品
	$('.th-img').each(function(index, element){
		$(document).on('click', '.th-img', function(){
			var imgSrc = $(this).children('img')[0].src;
			$('#float-img').attr('src', imgSrc);
		});
	});

	// 点击加载更多
	$(document).on('click', '#more', function(){
		$('.pic-bg').animate({height:0}, 300);
		$(this).html('==返回==').attr('id', 'off');
		$('.meng').css('display', 'block');
		$('.img-gather').css('height', '75%').css('border', '1px solid #fff');
		$('#menu-button').css('display', 'none');
		$('#float-img').css('display', 'none');
	});

	// 关闭加载更多
	$(document).on('click', '#off', function(){
		$('.pic-bg').animate({height:'75%'}, 200);
		$(this).html('==更多作品==').attr('id', 'more');
		$('.meng').css('display', 'none');
		$('.img-gather').css('height', '0').css('border', '0');
		$('#menu-button').css('display', 'block');
		$('#float-img').css('display', 'block');
	});

	// 删除图片
	$(document).on('click', '.meng', function(){
		if(parseInt($('.th-img').length) <= 1){
			alert('至少要保留一件作品');
			return false;
		}else{
			$(this).prev().fadeTo('slow', 0.1, function(){
				var cloneImg = $('.th-gather:first').clone();
				var src = $(this)[0].src;
				cloneImg.children('img').attr('src', src);
				$(cloneImg).insertBefore('.th-gather:first');

				$(this).parent('.th-img').remove();
				console.log($('.swiper-slide').length);
			});
		}
	});

	// 添加图片
	$(document).on('click', '.gather-meng', function(){
		var cloneLi = $('.th-img:first').clone();
		var srcLi = $(this).prev()[0].src;
		cloneLi.children('img').attr('src', srcLi);
		$(cloneLi).insertBefore('.th-img:first');

		$(this).parent('.th-gather').remove();
	});

	// 截图
	$('#share').click(function(){
		$('.menu').css('display', 'none');
		html2canvas($('.pic-bg'), {
	        onrendered: function(canvas){
	            //document.body.appendChild(canvas);
	            var img = canvas.toDataURL();
				// share code here //
	        }
	    });
	});
	




});

// 拍照
var upload = function(btn) {
    var btn = document.querySelector(btn);
    var file = btn.files[0];
    var reader = new FileReader();

   	reader.readAsDataURL(file);

    reader.onload = function(e){
    	$('.pic-bg').css('background', 'url(' + e.target.result + ')').css('background-size', '100% 100%');
        // document.body.style.backgroundImage = 'url(' + e.target.result + ')';
        // document.body.style.backgroundSize = "100%";
    };
}